// src/app/workspace/[workspaceId]/_components/invite-modal.tsx
import React, {useState} from 'react';
import {Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog";
import {Button} from "@/components/ui/button";
import {CopyIcon, RefreshCcw, RefreshCwIcon} from "lucide-react";
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {toast} from "sonner";
import {useNewJoinCode} from "@/features/workspaces/api/use-new-join-code";
import useConfirm from "@/hooks/social/use-confirm";

interface Props {
    open: boolean
    setOpen: (open: boolean) => void
    name: string
    joinCode: string
}

const InviteModal = ({open, setOpen, name, joinCode}: Props) => {
    const {mutate, isPending} = useNewJoinCode();
    const workspaceId = useWorkspaceId();
    const [code, setCode] = useState(joinCode)

    const [ConfirmDialog, confirm] = useConfirm(
        "Are you sure?",
        "This action is irreversible."
    )

    const handleNewCode = async () => {
        const ok = await confirm()
        if (ok) return

        console.log('invite modal new join code started')
        await mutate({workspaceId}, {
            onSuccess(newCode) {
                setCode(newCode)
                toast.success('Invite code regenerated')
            },
            onError() {
                toast.error("Failed to regenerate invite code")
            },
        })
    }
    const handleCopy = () => {
        const inviteLink = `${window.location.origin}/social/join/${workspaceId}`
        navigator.clipboard.writeText(inviteLink)
            .then(() => toast.success("Invite link copied to clipboard"))
    }

    return (
        <>
            <ConfirmDialog/>
            <Dialog
                open={open} onOpenChange={setOpen}
            >
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Invite people to {name}</DialogTitle>
                        <DialogDescription>
                            Use the code below to invite people to your workspace
                        </DialogDescription>
                    </DialogHeader>
                    <div className={`flex flex-col gap-y-4 items-center justify-center py-10`}>
                        <p className={`text-4xl font-bold tracking-widest uppercase`}>
                            {code}
                        </p>
                        <Button
                            onClick={handleCopy}
                            variant={'ghost'}
                            size={'sm'}
                        >
                            Copy link
                            <CopyIcon className={`size-4 ml-2`}/>
                        </Button>
                    </div>
                    {/*bug: 点击无效*/}
                    <div className={`flex items-center justify-between w-full`}>
                        <Button disabled={isPending}
                                onClick={handleNewCode} variant={'outline'}>
                            New code
                            <RefreshCcw className={`size-4 ml-2`}/>
                        </Button>
                        <DialogClose asChild>
                            <Button>
                                Close
                            </Button>
                        </DialogClose>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
};

export default InviteModal;